import { PanoramaSharp } from "@mui/icons-material";
import { Button, Divider, InputAdornment, TextField } from "@mui/material";
import React from "react";
import { useState } from "react";
import { useContext } from "react";
import { useEffect } from "react";
import { TitleContext } from "../../../router";
import Passage from "../UserPage/Passage";
import SearchIcon from "@mui/icons-material/Search";
import { Box } from "@mui/system";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import TocIcon from "@mui/icons-material/Toc";
import PlagiarismOutlinedIcon from "@mui/icons-material/PlagiarismOutlined";
import { useNavigate } from "react-router-dom";
export default function BlogPage() {
  const titleContext = useContext(TitleContext);
  useEffect(() => {
    titleContext.setnowTitle(12);
  }, []);

  const [params, setParams] = useState({});
  const navigate = useNavigate();
  const handleNewBlog = () => {
    navigate("/student/homepage/blogeditor/-1");
  };

  return (
    <div>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "wrap",
          // justifyContent: "center",
        }}
      >
        <Box
          sx={{
            margin: "50px 30px 10px 30px",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
          }}
        >
          <TextField
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircleIcon />
                </InputAdornment>
              ),
            }}
            id="outlined-search"
            label="作者"
            value={params?.name}
            onChange={(e) => {
              setParams({ ...params, name: e.target.value });
            }}
            type="search"
            sx={{ marginRight: "30px" }}
          />
          <TextField
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <PlagiarismOutlinedIcon />
                </InputAdornment>
              ),
            }}
            id="outlined-search"
            label="题目"
            value={params?.title}
            onChange={(e) => {
              setParams({ ...params, title: e.target.value });
            }}
            type="search"
            sx={{ marginRight: "30px" }}
          />

          <TextField
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
            }}
            id="outlined-search"
            label="内容"
            value={params?.content}
            onChange={(e) => {
              setParams({ ...params, content: e.target.value });
            }}
            type="search"
            sx={{ marginRight: "30px" }}
          />
          <Button variant="outlined" onClick={handleNewBlog}>
            发表新博文
          </Button>
        </Box>

        <Box sx={{ width: "80%", minWidth: "600px" }}>
          <Divider variant="middle" sx={{ margin: "30px 0 30px 0" }} />
          <Passage
            editor={false}
            params={params}
            showName={true}
            class="noScroll"
          />
        </Box>
      </Box>
    </div>
  );
}
